/* eslint-disable eqeqeq *///忽略==的警告
import React, { Component } from "react";
import "./temperatureColorarea.less";
import PubSub from 'pubsub-js'
import { meshLog, SPRemove, SPGet, SPSet } from "../../../config";
import inner from '../../../static/touch/inner.png'
import rgb_inner from '../../../static/touch/rgb_inner.png'
import next_icon from '../../../static/touch/next_icon.jpg'
import { lightControlJudgeAreaWorkOnSmartShift } from "../../../utils/smartshiftUtils";
import { allAreaGetTempRange, dev30_50fan } from '../../../utils/pidUtils';
import { areaLightTem } from '../../../utils/homelightUtils'
class TemperatureColorArea extends Component {
  constructor(a) {
    super(a);
    this.state = {
      areakong1: '',
      areakong2: '',
      areakong3: '',
      areakongcct: ''
    }
  }
  componentDidMount() {
    meshLog("每个组传进来的值2", this.props);
    let addr = this.props.element.groupName
    let address = this.props.element.groupId
    //meshLog(addr);
    let eBarWrap = document.getElementById(addr);
    //获取滑动条
    let eBarCon = eBarWrap.getElementsByClassName('kuang')[0];
    //获取滑动痕迹元素
    // let eBarInto = eBarWrap.getElementsByClassName('guiji')[0];
    //获取滑块
    let eBarDrag = eBarWrap.getElementsByClassName('arealightkuai')[0];
    //获取文本元素
    // let eBarText = eBarWrap.getElementsByClassName('bar_text')[0];
    //获取最大位置(这里面添加了修改色温的最大值和最小值)
    let maxtemdata = allAreaGetTempRange(this.props.element.groupId)
    let nMax = (eBarCon.offsetWidth - eBarDrag.offsetWidth) * ((Number(maxtemdata[1]) - Number(maxtemdata[0])) / (4300));
    let eBarCon1 = eBarWrap.getElementsByClassName('arealighttiao')[0];
    eBarCon1.style.width = nMax + eBarDrag.offsetWidth - 2 + "px"
    //meshLog('maxtemdata', maxtemdata);
    let arealightwenzi = eBarWrap.getElementsByClassName('arealightwenzi')[0];
    let moveweizhi = ((Number(maxtemdata[0]) - 2200) / (4300) * 220)
    if (maxtemdata[0] == 2200) {
      //meshLog('不用修改位置');
    } else {
      //meshLog('修改条和球的位置');
      eBarCon1.style.marginLeft = moveweizhi + "px"
      eBarDrag.style.marginLeft = moveweizhi + "px"
    }
    //修改默认数值
    let groupSetx = JSON.parse(SPGet("groupSetx"));
    this.setState({
      areakong1: this.props.element.isrgb === '01' ? 'none' : 'block',
      areakong2: this.props.element.isrgb === '01' ? 'block' : 'none',
      areakong3: this.props.element.isrgb === '01' && this.props.element.rgbH > 0 ? 'block' : 'none',
      areakongcct: this.props.element.isrgb === '01' && this.props.element.rgbH > 0 ? 'none' : 'block',
    })
    //修改的默认值方法
    let groupSetxxx = [];
    groupSetxxx = groupSetx && groupSetx.filter((item) => {
      const pamdun1 = item.groupId;
      if (pamdun1 == address) {
        return item
      }
    })
    meshLog('groupSetxxx[0].tem', groupSetxxx[0]);
    if (this.props.element.isrgb === '01' && this.props.element.rgbH > 0) {
      ///meshLog('组是rgb的组');
      let tem = groupSetxxx[0].tem
      arealightwenzi.value = tem + 'K';
      eBarDrag.style.left = Math.round(groupSetxxx[0].rgbH * nMax) + 'px';
      //PubSub.publish('backgroudCololArea', groupSetxxx[0])
    } else {
      // meshLog('组不是rgb的组');
      let tem = groupSetxxx[0].tem
      if (tem > maxtemdata[1]) {
        arealightwenzi.value = maxtemdata[1] + 'K';
        eBarDrag.style.left = Math.round((maxtemdata[1] - Number(maxtemdata[0])) / (Number(maxtemdata[1]) - Number(maxtemdata[0])) * nMax) + 'px';
      } else {
        //组里只有一种3000-5000的灯，恰好组里的所有灯都不在线，这个时候要显示3000K
        if (groupSetxxx[0].isOnline == '00') {
          let devicearea = [];
          if (devicearea.length == 0) {
            meshLog('temperatureColorarea.js,85行,里面没有数据，不需要修改');
          } else {
            let panduandev30_50 = 3000
            for (let i = 0; i < devicearea.length; i++) {
              if (dev30_50fan(devicearea[i].pid) == false) {
                panduandev30_50 = 2700
              }
            }
            tem = panduandev30_50
          }
        }
        // arealightwenzi.value = tem + 'K';
        // eBarDrag.style.left = Math.round((groupSetxxx[0].tem - Number(maxtemdata[0])) / (Number(maxtemdata[1]) - Number(maxtemdata[0])) * nMax) + 'px';

        arealightwenzi.value = 3500 + 'K';
        eBarDrag.style.left = Math.round((3500 - 2400) / (4200) * nMax) + 'px';
      }
    }
    // eBarInto.style.width = Math.round((this.props.element.tem) / (Number(maxtemdata[1])) * nMax) + eBarDrag.offsetWidth / 2 + 'px';


    //修改灯不开的时候点击问题，解决外面点击开关灯来解决问题
    let ssoo = this.props.element.isOnoff
    function guanguan() {
      meshLog('temperatureColorarea.js,195行,关了');
    }
    if (ssoo == '00') {
      //meshLog('关', ssoo);
      eBarDrag.removeEventListener('mousedown', guanguan, false);
      eBarCon.removeEventListener('click', guanguan, false);
    } else {
      // meshLog('可以', ssoo);
      //滑块添加拖拽事件
      eBarDrag.addEventListener('mousedown', function (event) {
        meshLog("temperatureColorarea.js,205行,wjk tem area-mousedown: " + address);
        let isOccu = lightControlJudgeAreaWorkOnSmartShift(address, false);
        if (isOccu) {
          return;
        }
        //初始化鼠标开始拖拽的点击位置
        let nInitX = event.clientX;
        //初始化滑块位置
        let nInitLeft = this.offsetLeft - moveweizhi;
        //用来存数据的地方
        let temtem = ''
        let rgbH = ''
        //页面绑定鼠标移动事件
        document.onmousemove = event => {
          //鼠标移动时取消默认行为，避免选中其他元素或文字
          event.preventDefault();
          //获取鼠标移动后滑块应该移动到的位置
          let nX = event.clientX - nInitX + nInitLeft;
          //限制滑块最大移动位置
          if (nX >= nMax) {
            nX = nMax;
          }
          //限制滑块最小移动位置
          if (nX <= 0) {
            nX = 0;
          }
          //修改滑块位置（因为用的是箭头函数，所以this还是指向滑块）
          this.style.left = nX + 'px';
          //修改滑动痕迹宽度
          // eBarInto.style.width = nX + this.offsetWidth / 2 + 'px';
          //修改文本数值eBarText.innerHTML = Math.ceil(nX / nMax * 100) / 10;
          arealightwenzi.value = Math.round(Math.ceil(nX / nMax * 100) / 100 * (Number(maxtemdata[1]) - Number(maxtemdata[0]))) + Number(maxtemdata[0]) + 'K';
          temtem = Math.round(Math.ceil(nX / nMax * 100) / 100 * (Number(maxtemdata[1]) - Number(maxtemdata[0]))) + Number(maxtemdata[0])
          rgbH = nX / nMax
        };
        //鼠标松开绑定事件，取消页面上所有事件
        document.onmouseup = async function (event) {
          document.onmousemove = null;
          document.onmouseup = null;
          meshLog("temperatureColorarea.js,244行,滑动最终的值", temtem);
          areaLightTem(temtem, address, rgbH)
        }
      });
      //滑动条添加点击事件
      eBarCon.addEventListener('click', async function (event) {
        meshLog("temperatureColorarea.js,250行,wjk tem area-click: " + address);
        let isOccu = lightControlJudgeAreaWorkOnSmartShift(address, false);
        if (isOccu) {
          return;
        }
        //meshLog(111111);
        //设置滑动条位置
        let nLeft = this.offsetLeft;
        //获取有定位的父元素
        let eParent = this.offsetParent;
        //循环所有有定位的父元素
        while (eParent) {
          //添加定位父元素offsetLeft值，用于准确定位滑动条与页面左侧的距离
          nLeft += eParent.offsetLeft;
          //再次获取父元素外的定位父元素
          eParent = eParent.offsetParent;
        }
        //计算滑块位置
        let nX = event.clientX - nLeft - moveweizhi;
        //修改滑块位置
        if (nX >= nMax) {
          nX = nMax;
        }
        //限制滑块最小移动位置
        if (nX <= 0) {
          nX = 0;
        }
        eBarDrag.style.left = nX + 'px';
        //修改滑动痕迹宽度
        // eBarInto.style.width = nX + eBarDrag.offsetWidth / 2 + 'px';
        //修改文本数值eBarText.innerHTML = Math.ceil(nX / nMax * 100) / 10
        arealightwenzi.value = Math.round(Math.ceil(nX / nMax * 100) / 100 * (Number(maxtemdata[1]) - Number(maxtemdata[0]))) + Number(maxtemdata[0]) + 'K';
        meshLog("temperatureColorarea.js,282行,点击的最终值", arealightwenzi.value)
        let temtem = Math.round(Math.ceil(nX / nMax * 100) / 100 * (Number(maxtemdata[1]) - Number(maxtemdata[0]))) + Number(maxtemdata[0])
        let rgbH = nX / nMax
        areaLightTem(temtem, address, rgbH)
        //meshLog('temtem', temtem); 图片的属性。不确定能不能用 disabled={this.props.element.isOnline === '00' ? 'true' : ''}
        //pointerEvents: this.props.element.isOnline === '00' ? 'none' : 'block',  控制图片按钮能不能点击的状态
      });
    }
  }
  settingColor = () => {
    const data = this.props.element
    let groupSetx = JSON.parse(SPGet("groupSetx"));
    let groupSetxxx = [];
    groupSetxxx = groupSetx && groupSetx.filter((item) => {
      const pamdun1 = item.areaNo;
      if (pamdun1 === data.areaNo) {
        return item
      }
    })
    //强制切换到这个组
    PubSub.publish('data', groupSetxxx[0])
    meshLog("wjk rgb area:", data.areaNo);
    let isOccu = lightControlJudgeAreaWorkOnSmartShift(data.areaNo, false);
    if (isOccu) {
      return;
    }
    //判断这个关灯下不能打开rgb界面,如果是关灯的，就不走下面发送命令
    let onOff = true
    if (onOff) {
      return;
    }
    SPSet('rgbpanduan', JSON.stringify(1))//存到localStorage
    SPSet('rgbshuju', JSON.stringify(groupSetxxx[0]))//存到localStorage
    PubSub.publish('kuangcolortiao', 1)//打开RGB界面的三个显示条
    // PubSub.publish('cctdate', groupSetxxx[0]);//传值到cct界面出弹框
    // PubSub.publish('hsldate', groupSetxxx[0]);//传值到hsl界面出弹框
    //PubSub.publish('rgbdate', data);//传值到rgb界面出弹框
  }
  arealightwenziCheck = async (object) => {
    meshLog('temperatureColorarea.js,322行,object.target.value', object.target.value);
    let addr = this.props.element.name
    //meshLog(addr);
    let eBarWrap = document.getElementById(addr);
    //获取滑动条
    let eBarCon = eBarWrap.getElementsByClassName('kuang')[0];
    //获取滑动痕迹元素
    // let eBarInto = eBarWrap.getElementsByClassName('guiji')[0];
    //获取滑块
    let eBarDrag = eBarWrap.getElementsByClassName('arealightkuai')[0];
    //获取文本元素
    // let eBarText = eBarWrap.getElementsByClassName('bar_text')[0];
    //获取最大位置(这里面添加了修改色温的最大值和最小值)
    let maxtemdata = allAreaGetTempRange(this.props.element.areaNo)
    let nMax = (eBarCon.offsetWidth - eBarDrag.offsetWidth) * ((Number(maxtemdata[1]) - Number(maxtemdata[0])) / (4300));
    //meshLog('maxtemdata', maxtemdata);
    let exp = /^[+-]?\d*(\.\d*)?(e[+-]?\d+)?$/
    let a = object.target.value
    if (exp.test(a)) {
      //为一个纯数值字符串
      meshLog('temperatureColorarea.js,342行,为一个纯数值字符串');
      if (object.target.value > Number(maxtemdata[1])) {
        object.target.value = Number(maxtemdata[1])
      } else {
        if (object.target.value <= 0) {
          object.target.value = ''
        } else {
          object.target.value = object.target.value
        }
      }
    } else {
      //...
      meshLog('temperatureColorarea.js,354行,不是一个纯数值字符串');
      object.target.value = Number(maxtemdata[0])
    }
  }
  checkarea = async (object) => {
    meshLog('temperatureColorarea.js,359行,checkarea', object.target.value);
    let addr = this.props.element.name
    let address = this.props.element.areaNo
    let eBarWrap = document.getElementById(addr);
    let arealightwenzi = eBarWrap.getElementsByClassName('arealightwenzi')[0];
    let eBarDrag = eBarWrap.getElementsByClassName('arealightkuai')[0];
    let eBarCon = eBarWrap.getElementsByClassName('kuang')[0];
    let maxtemdata = allAreaGetTempRange(this.props.element.areaNo)
    let nMax = (eBarCon.offsetWidth - eBarDrag.offsetWidth) * ((Number(maxtemdata[1]) - Number(maxtemdata[0])) / (4300));
    let eBarCon1 = eBarWrap.getElementsByClassName('arealighttiao')[0];
    eBarCon1.style.width = nMax + eBarDrag.offsetWidth - 2 + "px"
    let tem = 0
    let exp = /^[+-]?\d*(\.\d*)?(e[+-]?\d+)?$/
    let a = object.target.value
    if (exp.test(a)) {
      //为一个纯数值字符串
      if (object.target.value < Number(maxtemdata[0])) {
        tem = Number(maxtemdata[0])
      } else {
        tem = object.target.value
      }
      arealightwenzi.value = tem + 'K';
      eBarDrag.style.left = Math.round((tem - Number(maxtemdata[0])) / (Number(maxtemdata[1]) - Number(maxtemdata[0])) * nMax) + 'px';
      let rgbH = (tem - Number(maxtemdata[0])) / (Number(maxtemdata[1]) - Number(maxtemdata[0]))
      areaLightTem(tem, address, rgbH)
    } else {
      //...
      meshLog('temperatureColorarea.js,386行,checkarea不变');
    }
  }
  checkareatem = async (object) => {
    meshLog('temperatureColorarea.js,390行,checkarea111', object.target.value);
    let addr = this.props.element.name
    let eBarWrap = document.getElementById(addr);
    let arealightwenzi = eBarWrap.getElementsByClassName('arealightwenzi')[0];
    arealightwenzi.value = object.target.value.slice(0, 4)
    let groupSetx = JSON.parse(SPGet("groupSetx"));
    let address = this.props.element.areaNo
    let groupSetxxx = [];
    groupSetxxx = groupSetx && groupSetx.filter((item) => {
      const pamdun1 = item.areaNo;
      if (pamdun1 === address) {
        return item
      }
    })
    meshLog('temperatureColorarea.js,404行,groupSetxxx[0]', groupSetxxx);
    if (groupSetxxx[0].isOnoff == '00') {
      arealightwenzi.disabled = true
    } else {
      arealightwenzi.disabled = ''
    }
  }
  render() {
    return (
      <div style={{ float: "left" }}>
        <div className="arealight" id={this.props.element.groupName}>
          <input disabled={this.props.element.isOnline == '00' && this.props.element.isOnoff == '00' ? true : false} style={{ cursor: 'pointer', display: this.state.areakong1 }} type="string"
            onFocus={this.checkareatem} onBlur={this.checkarea} onInput={this.arealightwenziCheck} className="arealightwenzi" ></input>
          <img alt="" src={next_icon} style={{ cursor: 'pointer', marginLeft: 240, width: 25, height: 25, display: this.state.areakong2 }} onClick={() => { this.settingColor() }} />
          <div className="arealighttiaomix" style={{ marginTop: -25 }} >
          </div>
          {/* {meshLog('this.state.areakong3', this.state.areakong3 === 'block' ? '1' : '2',)} */}
          <img alt="" className="arealighttiao" src={inner} style={{ display: this.state.areakongcct, marginTop: -20 }} />
          <img alt="" className="arealighttiao" src={rgb_inner} style={{ display: this.state.areakong3, marginTop: -20 }} />
          <div className="kuang" style={{ marginTop: -20 }}    >
          </div>
          <div className="arealightkuai"   >
          </div>
        </div>
      </div >
    );
  }
};
export default TemperatureColorArea;
